<template>
  <div class="page-container " v-loading="loading">
    <ex_header_spiler :title="$tt('label_base_info')" />
    <ex_super_desc v-bind="baseOption" :data="form" :attrs="$defaultDetailDescAttrs" />

    <ex_header_spiler :title="$tt('label_sku_specification')" />
    <ex_super_table v-bind="detailOption" :data="form.taskDetailList" size="default" height="500">
    </ex_super_table>


  </div>
</template>

<script>
import router_params from '@/mixin/router_params';

import popover_sn_detail from '@/component/wms/popover_sn_detail'

// import DetailDescTable from '@/component/dialog/detail_common'
export default {
  title: 'title_picking_task_detail',
  components: { popover_sn_detail },
  mixins: [router_params],

  data() {
    return {
      loading: false,
      form: {},
      baseOption: {
        model: [
          { key: 'pickNo', label: 'label_pick_code' },
          { key: 'waveNo', label: 'label_wave_code' },
          { key: 'warehouseCode', label: 'label_outbound_warehouse' },
          { key: 'outStoreType', label: 'label_outbound_type', formatter: (r, c, v) => this.$enumShow(v, "OutboundOrderTypeEnum") },
          { key: 'status', label: 'label_pick_status', formatter: (r, c, v) => this.$enumShow(v, "PickTaskStatusEunm") },
          { key: 'bizType', label: 'label_business_type', formatter: (r, c, v) => this.$enumShow(v, "BizTypeEnum") },

          // { key: 'packageCount', label: 'label_package_number' },
          // { key: 'logisticsCode', label: 'label_logistics' },
          { key: 'twiceTaskFlag', label: 'label_is_need_second_pick', formatter: (r, c, v) => this.$enumShow(v, "YesOrNoEnum") },
          { key: 'allowPdaTakeFlag', label: 'label_is_can_PDA_claim', formatter: (r, c, v) => this.$enumShow(v, "YesOrNoEnum") },

          { key: 'locationCount', label: 'label_warehouse_location_count' },

          { key: 'skuCategoryCount', label: 'label_sku_categ_count' },
          { key: 'skuTotalPiece', label: 'label_sku_total_count', },
          { key: 'actualPickCount', label: 'label_actual_pick_count', },

          { key: 'reason', label: 'label_short_pick_reason' },

    


          { key: 'pickPerson', label: 'label_assign_pick_user' },
          { key: 'pickPersonDate', label: 'label_assign_pick_date', formatter: (r, c, v) => this.$dateFormat(v) },
          {
            key: "supplierNames", label: 'label_pms_supply', 'width': 130,
            render: (h, { data }) => {
              const item = data
              const list = item.supplierNames ? item.supplierNames.split(",").map(it => (<div>{it}</div>)) : null
              return (<div>
                {list}
              </div>)
            }
          },
          { key: 'allocateTime', label: 'label_assign_time', formatter: (r, c, v) => this.$dateFormat(v) },
          {
            key: "areaCodes", label: 'label_hit_area', 'width': 130,
            render: (h, { data }) => {
              const item = data
              const list = item.areaCodes ? (item.areaCodes.split(",").map(it => (<div>{it}</div>))) : null
              return (<div>
                {list}
              </div>)
            }
          },
          {
            key: "assignPersonPieceInfo", label: 'label_assign_info', 'width': 130,
            render: (h, { data }) => {
              const item = data
              let list = []
              try {
                list = JSON.parse(item.assignPersonPieceInfo)
              } catch (e) { }
              return (<div>
                {list.map(it => (<div>{it.personName}(<span class="bold color_success">{it.orderCount}</span>)</div>))}
              </div>)
            }
          },


        ],
      },
      detailOption: {
        'row-class-name': this.rowClass,
        model: [
          {
            key: 'outOrderNo', label: 'label_outbound_code', 'width': 160, 
            propertyFilter: true, sortable: true,
          },
          {
            key: 'boxNo', label: 'label_box_code', 'min-width': 150, if: () => !this.SkuOutbound,
            propertyFilter: true, sortable: true,
            render: (h, { row, column }) => {
              const code = row[column.property]
              if (!code) return this.$tt('data_temp_none')
              return (<text_extra_tooltip_operate
                value={code}
                data_type={column.property} data_id={row.boxId}
                extra_barcode_image={true} extra_text_align='center'
              />)
            },
          },
      
          
          {
            key: 'skuBarcode', label: 'label_sku_code', 'min-width': 150,

            propertyFilter: true, sortable: true,
            render: (h, { row, column }) => {
              if (row.skuId < 0) return '——'
              const code = row[column.property]
              if (!code) return this.$tt('data_temp_none')
              return (<text_extra_tooltip_operate
                value={code}
                data_type={column.property} data_id={row.boxId}
                extra_barcode_image={true} extra_text_align='center'
              />)
            },
          },
          {
            key: 'skuOnlyCode', label: 'label_sku_only_code', 'min-width': 150,

            propertyFilter: true, sortable: true,
            render: (h, { row, column }) => {
              if (row.skuId < 0) return '——'
              const code = row[column.property]
              if (!code) return this.$tt('data_temp_none')
              return (<text_extra_tooltip_operate
                value={code}
                data_type={column.property} data_id={row.boxId}
                extra_barcode_image={true} extra_text_align='center'
              />)
            },
          },
          {
            key: 'skuNameCn', label: 'label_sku_name', 'show-overflow-tooltip': true, 'width': 120,
            formatter: (r, c, v) => (r.skuId < 0) ? '——' : this.$formatNameCode(v, r.skuNameEn)
          },
          {
            key: 'locationCode', 'min-width': 250,
            label: { _key: 'label_xxx_type_arrow', i18n: true, type: 'label_recommend_location', code: '', count: 'label_plan_pick_count' },
            propertyFilter: true, sortable: true,
            render: (h, { row }) => {
              const item = row
              return (<div>【{item.locationCode}】→(<span class="bold color_info">{item.pickCount}</span>)</div>)
            }
          },
          { key: 'stockUseType', label: 'label_stock_usage', 'width': 120, sortable: true, formatter: (r, c, v) => this.$enumShow(v, "StockUsageEnum") },
          // { key: 'areaCode', label: 'label_warehouse_area_location_info', 'min-width': 260, 'show-overflow-tooltip': true, slot: 'area_location_info', },
          {
            key: 'actualPickingCount', label: 'label_actual_pick_count', 'width': 120, sortable: true,
            render: (h, scope) => {
              return h(popover_sn_detail, {
                props: {
                  value: scope.row.actualPickingCount,
                  list: scope.row.actualPickingDetail,
                  option: {
                    stockUsage: "stockUseType",
                    snCode: "stockSkuSnCode",
                  },
                },
              })
            },
          },

          {
            key: 'actualPickingDetail', 'min-width': 350,
            label: {
              _key: 'label_xxx_type_arrow', i18n: true,
              type: 'label_actual_pick_location',
              code: 'label_pick_car_code',
              count: 'label_actual_pick_count',
            },
            render: (h, { row }) => {
              const item = row
              if (_.isEmpty(item.actualPickingDetail)) return this.$renderText(h, null)
              return (<div>
                {item.actualPickingDetail.map(it => (
                  <div>【{it.locationCode}】→【{it.cartContainerNo}】(<span class="bold color_success">{it.count}</span>)</div>
                ))}
              </div>)
            }
          },
          { key: 'pickPerson', label: 'label_pick_user', 'width': 120, 'show-overflow-tooltip': true, },
          { key: 'pickDate', label: 'label_pick_date', 'width': 130, 'show-overflow-tooltip': true, formatter: (r, c, v, i) => this.$dateFormat(v) },
        ],
      },
    }
  },

  computed: {

    SkuOutbound() {
      return this.form.taskDetailList ? this.form.taskDetailList.every(it => !it.boxNo) : true
    },

  },
  methods: {
    rowClass({ row, rowIndex }) {
      // if (row.recommendLocationPickFlag != 'Y' && row.actualPickingCount > 0) {
      //   return 'back_warning_light back_warning_light_hover'
      // }
    },
    init_data_default(into_params) {
      if (into_params.id) {
        this.loading = true
        this.$ajax({
          url: "/wms-api/outbound/OutboundPickingTaskRpc/detail.json",
          method: 'post',
          data: { id: into_params.id },
          success: (res) => {
            if (res && res.data && res.data.taskDetailList) {
              res.data.taskDetailList.forEach(it => {
                if (it.actualPickingDetail) {
                  it.actualPickingDetail = JSON.parse(it.actualPickingDetail)
                } else {
                  it.actualPickingDetail = []
                }
              })
            }

            this.form = Object.assign({}, res.data)
            this.fixTabLabel()
          },
          complete: () => {
            this.loading = false
          }
        })
      }
      this.fixTabLabel()
    },
    fixTabLabel() {
      if (!!this.form.pickNo) {
        this.$emit("tagModifyLabel", {
          _key: 'label_name_code', name: this.$tt("title_picking_task_detail"),
          code: this.form.pickNo || ''
        })
      } else {
        this.$emit("tagModifyLabel", "title_picking_task_detail")
      }
    },


  }
}
</script>
